{% extends "post/index.html" %}

{% block title %}
好物 | 蛮三
{% endblock %}


{% block content %}
<div class="container" id="app">
{#  加载中标志#}
  <div v-if="loading">
    <h3>
      <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
      </div>
      loading ...
    </h3>
  </div>
{#  主页面#}
  <div class="row" v-else>
    <div class="col-md-2"></div>
    <div class="col-md-8 bg-white py-5">
      <!-- 商品列表 -->
      <div class="row">
        <div class="col-6 justify-content-center" v-if="object_list.length>0" v-for="obj in object_list" style="padding-left: 2px; padding-right: 2px; ">
          <div class="card my-2 border-0">
            <img :src="obj.previews" alt="好物预览" width="100%">
            <div class="card-body px-2 py-0">
              <p class="py-0 my-0">[[ obj.title ]]</p>
              <p class="d-flex justify-content-between" >
                <small class="text-white bg-warning rounded px-1">￥<strong>[[ obj.price ]]</strong></small>

                <small class="text-muted text-success">
                  <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-eye-fill text-darkwhite" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
                    <path fill-rule="evenodd" d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
                  </svg>
                  [[ obj.pv ]]
                </small>
              </p>
            </div>
            <a :href="obj.url" class="stretched-link" target="_blank" @click="add_pv(obj.id)"></a>
          </div>
        </div>
        <div class="col" v-if="object_list.length==0">
          <p class="text-muted text-center">空空如也~</p>
        </div>
      </div>

    </div>
    <div class="col-md-2"></div>
  </div>

</div>
{% endblock content %}


{% block extra_script %}
<script>
var csrf_token = '{{ csrf_token }}';
var vm = new Vue({
    el: '#app',
    data: {
        error: null,
        loading: true,
        object_list: [],
        next: '{% url "goods-list" %}',
    },
    methods: {
        load_goods: function(url) {
            axios.get(url)
                 .then(res => {
                     console.log(res)
                     var obj_list = res.data.results;
                     for (let i=0; i < obj_list.length; ++i) {
                         obj_list[i].created_time = new Date(obj_list[i].created_time);
                     }
                     this.object_list = this.object_list.concat(obj_list);
                     this.next = res.data.next;
                 })
                 .catch(err => this.error = err)
                 .finally(res => this.loading = false);
        },
        add_pv: function (post_id) {
            //  增加page view （pv）
            let url = `{% url "summary-list" %}${post_id}/visit_count/`;
            axios.patch(url, {id: post_id}, {headers: {'X-CSRFToken': csrf_token}})
                 .then(res => {
                     let data = res.data;
                     console.log(data);   //  type: echo, value: OK
                 })
                 .catch(err => console.log(err));
        },
    },
    delimiters: ['[[', ']]'],
    mounted() {
        // 加载商品
        this.load_goods(this.next)
    }
});
</script>
{% endblock extra_script %}
